import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Modal, Icon, Tools, SearchBar, Button } from 'weaver-mobile';
import { SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import { renderLoading, getTemplateBasicItem, getTemplateLinkItem, getTemplateBasicItemToHtml, renderNoData } from '../public';
import { compareParams } from '../../util';
import BackTop from '../../public/back-to-top';
import RouteModal from '../communication/RouteModal';
const getLabel = Tools.getLabel;
const alert = Modal.alert;

/* 申请加入 */
@withRouter
@inject('applyStore')
@observer
export default class Apply extends React.Component {

  static defaultProps = {
    prefixCls: 'cowork-apply-info',
  }

  constructor(props) {
    super(props);
    this.state = {
      path: props.location.pathname + '/detail',
			coworkId: '',
    }
  }

  componentDidMount() {
    const { applyStore: { getCoworkApplyPageList, getCoworkApplyShareCondition } } = this.props;
    getCoworkApplyPageList();
    getCoworkApplyShareCondition();
  }

  componentWillUnmount() {
    const { applyStore: { clearInfo, doApplyCancel } } = this.props;
    clearInfo();
    doApplyCancel();
  }

  getTemplate = () => {
    const newTemp = {
      default: [{
        key: 'col_1',
        render: (data) => {
          const curCls = "cowork-template-list";
          return (
            <div className={curCls} key={data.id}>
              {getTemplateBasicItem(curCls, getLabel(344, '主题'), data.namespan)}
              {getTemplateBasicItem(curCls, getLabel(83209, '版块'), data.typeidspan)}
              {getTemplateLinkItem(curCls, getLabel(2097, '负责人'), data.principalspan,data.principal)}
              {getTemplateBasicItemToHtml(curCls, getLabel(25734, '说明'), data.remarkspan)}
              {getTemplateBasicItem(curCls, getLabel(18470, '回复数'), data.replyNumspan)}
              {getTemplateBasicItem(curCls, getLabel(83218, '参与人数'), data.id_1span)}
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  render(){
    const { prefixCls, applyStore: { setStoreState, applyInfoList, applyInfoSearch ,getCoworkApplyPageList, doApplyCancel, doApplySelectAll, doApplyselectNone,doApplyReset
      ,applyAdValue,updateApplyAdvance,showApplyCheck,applyLoading,coworkApplayInfo} } = this.props;
    const datas = toJS(applyInfoList.data);
    const themeSelectedKeys = toJS(applyInfoList.selectedRowKeys);
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doApplyReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          getCoworkApplyPageList();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (applyInfoSearch) {
      compare = compareParams(toJS(applyInfoSearch.form.formData), toJS(applyInfoSearch.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';

    return applyLoading ? renderLoading :  (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390654,"请输入主题")}
          value={applyAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Icon key={adType} type={adType} /> },
          ]}
          onExtraButtonClick={() => this.props.history.push(applyInfoSearch.path)}
          onChange={val => updateApplyAdvance(val)}
          onSubmit={getCoworkApplyPageList}
        />
        <SearchAdvanced
          store={applyInfoSearch}
          buttonGroupData={buttonGroupData} 
        />
        {showApplyCheck && (
          <div className="cowork-template-top">
            <span className="cowork-template-top-cancel" onClick={doApplyCancel}>{getLabel(201, '取消')}</span>
            <span>{getLabel(31503,"已选择")}{themeSelectedKeys.length}{getLabel(390655,"个主题")}</span>
            {themeSelectedKeys.length !== datas.length ?
              <span className="cowork-template-top-all" onClick={doApplySelectAll}>{getLabel(556, '全选')}</span> :
              <span className="cowork-template-top-all" onClick={doApplyselectNone}>{getLabel(387379,"取消全选")}</span>
            }
          </div>
        )}
        <div className={`cowork-template ${showApplyCheck && 'cowork-template-checked'}`}>
          {datas.length === 0 ? renderNoData : (
            <BackTop
              visibilityHeight='200'
              modal
              target='wm-list-view-page-modal-scrollview'
            >
            <ListViewPage.Normal
              store={applyInfoList}
              showCheck={showApplyCheck}
              getTemplate={this.getTemplate}
              onRowClick={(selectedRowKeys) => {
								let title = `${getLabel(390659, '确定要参加到')}【${selectedRowKeys.name}】${getLabel(386724, '吗')}？`;
                let currentModel = alert(title,'', [
                  { text: getLabel(31129, '取消') },
                  {
                    text: getLabel(33703, '确认'),
                    onPress: () => {
                      coworkApplayInfo({coworkIds:selectedRowKeys.id});                    
                    }
                  },
								]);
								setStoreState({ currentModel: currentModel });
              }}
            />
          </BackTop>
          )}
          {showApplyCheck && <Button type="primary" disabled={themeSelectedKeys.length === 0 ? true : false} onClick={() => {coworkApplayInfo({coworkIds: themeSelectedKeys.join(','),dotype:'batch'})}}>{getLabel(83219, '批量申请')}</Button>}
        </div>
        <RouteModal/>
      </div>
    );
  }
}